<!--  -->
<template>
  <div>
    <p>
        商品名称： <input type="text" v-model="user">
        商品价格： <input type="text" v-model="jiage">  
        <button @click="tianjia">添加商品</button>
    </p>

    <table style="width: 600px; border: 1px solid black;text-align: center; background-color: orange; color: aliceblue; height: 40px;">
         <tr >
            <td>商品序号</td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>删除商品</td>
         </tr>
         <tr v-for="(item,key) in arr" :key="key">
            <td>{{key+1}}</td>
            <td>{{item.user}}</td>
            <td>{{item.jiage}}</td>
            <td><button @click="del(key)">删除</button></td>
         </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
        user:"",
        jiage:"",
        arr:[]
    };
  },

  components: {},

  computed: {},

  methods:{
    tianjia(){
       var list={user:this.user,jiage:this.jiage}
       this.arr.push(list)
       this.user=""
       this.jiage=''
    },
    del(key){
        this.arr.splice(key,1)
    }
  },
  watch: {},
  mixins: []
}

</script>
<style  scoped>
</style>